<template>
  <div
    class="diy-goods"
    :style="[
      `padding:${diyItem.style.mt}px ${diyItem.style.mr}px ${diyItem.style.mb}px ${diyItem.style.ml}px `,
    ]"
  >
    <div
      class="diy-goods-box"
      :class="[
        diyItem.style.shade == 1 ? 'style-shade' : '',
        `scroll-${diyItem.layout.scroll}`,
        `layout-${diyItem.layout.value}`,
      ]"
      :style="[
        `padding:${diyItem.style.pt}px ${diyItem.style.pr}px ${diyItem.style.pb}px ${diyItem.style.pl}px `,
        `background:${
          diyItem.style.bg_status == 1 ? diyItem.style.bg : 'none'
        }`,
        `border-radius:${diyItem.style.t_radius}px ${diyItem.style.t_radius}px ${diyItem.style.b_radius}px ${diyItem.style.b_radius}px`,
        `margin-left:-${
          diyItem.layout.value == 1 || diyItem.layout.value == 4
            ? diyItem.style.item_pm
            : Number(diyItem.style.item_pm) / 2
        }px`,
        `margin-right:-${
          diyItem.layout.value == 1 || diyItem.layout.value == 4
            ? diyItem.style.item_pm
            : Number(diyItem.style.item_pm) / 2
        }px`,
      ]"
    >
      <template v-for="(goods, idx) in goodsList" :key="idx">
        <div class="diy-goods-item">
          <div
            class="diy-goods-item-box"
            :class="[
              `${diyItem.layout.border == 2 ? 'style-shade' : ''}`,
              `diy-goods-item-${diyItem.layout.border}`,
              `${diyItem.layout.border == 3 ? 'diy-goods-item-border ' : ''}`,
            ]"
            :style="[
              `border-radius:${diyItem.style.item_radius}px`,
              `border-color:${diyItem.style.item_border_color}`,
              `margin:${
                diyItem.layout.value == 1 || diyItem.layout.value == 4
                  ? diyItem.style.item_pm
                  : Number(diyItem.style.item_pm) / 2
              }px`,
            ]"
          >
            <div
              @click="toGoodsDetail(goods.id)"
              class="goods-image"
              :style="[`background-image:url(${goods.goods_image})`]"
            ></div>
            <div class="p10 diy-goods-layout-right">
              <!-- 商品名称 -->
              <div
                @click="toGoodsDetail(goods.id)"
                class="goods-name"
                v-if="diyItem.other.show.goods_name == 1"
              >
                <div
                  class="fz-default"
                  :class="diyItem.style.item_bold == 1 ? 'fw' : ''"
                >
                  {{ goods.goods_name }}
                </div>
              </div>
              <!-- 商品卖点 -->
              <div
                class="goods-selling-point text-grey"
                v-if="diyItem.other.show.selling_point == 1"
              >
                <div>{{ goods.selling_point }}</div>
              </div>
              <!-- 商品销量 -->
              <div class="goods-sales text-grey">
                <div v-if="diyItem.other.show.goods_sales == 1">
                  已售{{ String(goods.goods_sales) }}件
                </div>
              </div>

              <!-- 商品价格 -->
              <div class="goods-bottom-box">
                <div>
                  <money
                    v-if="diyItem.other.show.goods_price == 1"
                    :fw="diyItem.style.item_bold == 1"
                    :value="goods.goods_price"
                  ></money>
                  <div>
                    <money
                      v-if="diyItem.other.show.market_price == 1"
                      :value="goods.market_price"
                      market
                    ></money>
                  </div>
                </div>

                <!-- 加入购物车 多规格-->
                <template
                  v-if="
                    diyItem.other.show.cart == 1 &&
                    (goods?.spec_type?.value == 2 || diyItem.layout.value == 3)
                  "
                >
                  <div
                    class="goods-cart-btn text-space"
                    :class="
                      diyItem.other.cart.layout != 0
                        ? 'layout-' + diyItem.other.cart.layout
                        : ''
                    "
                    :style="[cartStyle(goods)]"
                    @click.stop="toSku(Number(goods.id), idx)"
                  >
                    {{
                      diyItem.other.cart.layout != 0
                        ? diyItem.other.cart.title
                        : ""
                    }}
                    <template>
                      <!-- 默认 -->
                      <div
                        class="goods-cart-btn-icon icon icon-jia"
                        v-if="diyItem.other.cart.layout == 0"
                      ></div>
                      <div
                        class="goods-cart-count"
                        v-if="goods.goods_cart_count"
                      >
                        {{ goods.goods_cart_count }}
                      </div>
                    </template>
                  </div>
                </template>

                <!--  -->
                <template
                  v-if="
                    diyItem.other.show.cart == 1 &&
                    goods?.spec_type?.value == 1 &&
                    diyItem.other.cart.layout !== 3
                  "
                >
                  <template v-if="goods.goods_cart_count == 0">
                    <div
                      class="goods-cart-btn"
                      :class="
                        'layout-' +
                        (diyItem.other.cart.layout != '0'
                          ? diyItem.other.cart.layout
                          : '')
                      "
                      :style="[cartStyle(goods)]"
                      @click.stop="toSkus(goods.id, goods.goods_sku_id, idx)"
                    >
                      {{
                        diyItem.other.cart.layout
                          ? diyItem.other.cart.title
                          : ""
                      }}
                      <!-- 默认 -->
                      <div
                        v-if="!diyItem.other.cart.layout"
                        class="goods-cart-btn-icon icon icon-jia"
                      ></div>
                    </div>
                  </template>
                  <template
                    v-if="goods.goods_cart_count && goods.goods_cart_count > 0"
                  >
                    <numberBox
                      v-model="goods.goods_cart_count"
                      @change="changeNum"
                      :params="{
                        goodsId: goods.id,
                        skuId: goods.goods_sku_id,
                      }"
                      :index="idx"
                      :max="
                        goods.goods_stock > goods.buy_limit &&
                        goods.buy_limit > 0
                          ? goods.buy_limit
                          : goods.goods_stock
                      "
                      :min="0"
                      :tips="
                        goods.buy_least == 0 && goods.buy_limit == 0
                          ? '购物车已经加入了' +
                            goods.goods_cart_count +
                            '件，不能再加入了哦,赶紧去购买吧'
                          : (goods.buy_least > 0 &&
                            goods.goods_cart_count != goods.buy_least
                              ? '该商品起购 ' + goods.buy_least + '件 '
                              : '') +
                            (goods.buy_limit > 0
                              ? '限购 ' + goods.buy_limit + '件'
                              : '')
                      "
                      :inputdisabled="true"
                      height="29"
                      width="40"
                    >
                    </numberBox>
                  </template>
                </template>
              </div>

              <!-- 角标 -->
              <div
                class="goods-item-lable"
                :class="'lable-' + diyItem.other.label.type"
                v-if="diyItem.other.show.label == 1"
              >
                <!-- 新品 -->
                <div
                  class="goods-item-lable-box"
                  v-if="diyItem.other.label.type == 'new'"
                >
                  新品
                </div>
                <!-- 热卖 -->
                <div
                  class="goods-item-lable-box"
                  v-if="diyItem.other.label.type == 'hot'"
                >
                  热卖
                </div>
                <!-- 自定义 -->
                <div
                  v-if="diyItem.other.label.type == 'auto'"
                  class="goods-item-lable-box icon"
                >
                  <image
                    v-if="diyItem.other.label.img !== ''"
                    :src="diyItem.other.label.img"
                  />
                  <div
                    v-if="diyItem.other.label.img == ''"
                    :src="diyItem.other.label.img"
                    class="empty-icon"
                  >
                    角标<br />区域
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <goodsSku
      ref="goodsSkuRef"
      @init="toInit"
      :goodsId="goodsId"
      bottom="0"
    ></goodsSku>
  </div>
</template>
      
      <script lang="ts">
export default {
  name: "storeDiyPreviewGoods",
};
</script>
      <script  lang="ts" setup >
import { ref, getCurrentInstance, watch, onMounted, nextTick } from "vue";
import { diyGoodsDataType, Result, ResultError } from "@/types";
import goodsSku from "@/components/goods-sku/index.vue";
import numberBox from "@/components/ui/numberbox/index.vue";
import { storeToRefs } from "pinia";
import { useConfig } from "@/store";
import { createCart, updateCart } from "@/api/cart";

const { DIYTHEME } = storeToRefs(useConfig());
const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const props = withDefaults(
  defineProps<{
    diyItem: diyGoodsDataType;
    index: number;
  }>(),
  {
    diyItem: () => {
      return {
        params: {
          source: "auto",
          cate_id: [],
          sort: "all",
          limit: 0,
        },
        layout: {
          value: 2,
          border: 1,
          scroll: 0,
        },
        style: {
          mt: 0,
          mb: 0,
          ml: 0,
          mr: 0,
          pt: 0,
          pb: 0,
          pl: 0,
          pr: 0,
          t_radius: 0,
          b_radius: 0,
          bg_status: 0,
          bg: "#FFFFFF",
          shade: 0,
          item_radius: 0,
          item_border_color: "#f0f0f0",
          item_pm: 5,
          item_fill: 1,
          item_bold: 0,
        },
        other: {
          show: {
            goods_name: 1,
            goods_price: 1,
            market_price: 1,
            selling_point: 1,
            goods_sales: 1,
            cart: 0,
            label: 0,
          },
          label: {
            type: "new",
            layout: 1,
            img: "",
          },
          cart: {
            layout: 0,
            title: "购买",
          },
        },
        default_data: {
          goods_name: "此处显示商品名称，最多显示2行",
          goods_image: "",
          goods_price: 99.0,
          market_price: 99.0,
          goods_stock: 100,
          selling_point: "这里显示商品描述，最多显示1行",
          goods_sales: 100,
        },
        data: [],
      };
    },
    index: 0,
  }
);

const goodsList = ref<Array<any>>([]);

const setGoodsList = (data: Array<any>) => {
  if (data.length == 0 && props.diyItem.default_data) {
    goodsList.value = [];
    for (var i = 0; i < 6; i++) {
      goodsList.value.push(props.diyItem.default_data);
    }
  } else {
    goodsList.value = data;
  }
};
watch(
  () => props.diyItem.data,
  (val) => {
    setGoodsList(val);
  },
  { deep: true }
);

const goodsId = ref<number>(0);

const goodsSkuRef = ref<HTMLElement>();

const toSku = (id: number, index: number) => {
  goodsId.value = id;
  nextTick(() => {
    if ($utils.checkLogin("login")) {
      proxy?.$refs["goodsSkuRef"]?.open();
    }
  });
};

const toSkus = (id: number, skuId: number, index: number) => {
  let obj = {
    goods_id: id,
    goods_num: 1,
    goods_sku_id: skuId,
  };
  addCart(obj, index);
};

interface cartDataType {
  goods_id: number;
  goods_num: number;
  goods_sku_id: number;
}

const addCart = (obj: cartDataType, index: number) => {
  createCart(obj)
    .then((res: Result) => {
      goodsList.value[index].goods_cart_count = obj.goods_num;
      $utils.successMsg(res.message);
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const skuClose = () => {
  proxy?.$refs["goodsSkuRef"]?.close();
};

const toGoodsDetail = (id: number | string | undefined) => {
  if (typeof id == "undefined") {
    return false;
  }
  $utils.routeRedirectTo("/pages/goods/detail?id=" + id);
};

const cartStyle = (item: any) => {
  var style: any = {};
  if (
    props.diyItem.other.cart.layout == 2 ||
    props.diyItem.other.cart.layout == 4
  ) {
    style.borderColor = "#dedede";
    style.color = "#dedede";
    if (item.goods_stock > 0) {
      style.borderColor = DIYTHEME.value?.host_bg;
      style.color = DIYTHEME.value?.host_bg;
    }
  } else {
    style.background = "#dedede";
    style.color = "#fff";
    if (item.goods_stock > 0) {
      style.background = DIYTHEME.value?.host_bg;
      style.color = DIYTHEME.value?.host_color;
    }
  }
  return style;
};

interface cartDataType {
  goods_id: number;
  goods_num: number;
  goods_sku_id: number;
}

const changeNum = (obj: { value: number; index: number; params: any }) => {
  console.log(obj);
  _updateCart(
    {
      goods_id: obj.params.goodsId,
      goods_num: obj.value,
      goods_sku_id: obj.params.skuId,
    },
    obj.index
  );
};

const _updateCart = (obj: cartDataType, index: number) => {
  updateCart(obj)
    .then((res: Result) => {
      goodsList.value[index].goods_cart_count = obj.goods_num;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const toInit = () => {
  $utils.getDiyData();
};

onMounted(() => {
  setGoodsList(props.diyItem.data);
});
</script>
    <style scoped>
.diy-goods {
  overflow: hidden;
}
.diy-goods .diy-goods-box {
  overflow: hidden;
}
.diy-goods .diy-goods-box .diy-goods-item .diy-goods-item-box {
  position: relative;
  overflow: hidden;
  background: #ffffff;
}
.diy-goods
  .diy-goods-box
  .diy-goods-item
  .diy-goods-item-box.diy-goods-item-border {
  border-style: solid;
  border-width: 1rpx;
  border-color: #f0f0f0;
}

.diy-goods .diy-goods-box .diy-goods-item .diy-goods-item-box .goods-image {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
  background: #fff;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
}

.diy-goods
  .diy-goods-box
  .diy-goods-item
  .diy-goods-item-box
  .goods-item-lable
  > .goods-item-lable-box {
  position: absolute;
  left: 0;
  top: 20rpx;
  font-size: var(--base-size-small);
}

.diy-goods
  .diy-goods-box
  .diy-goods-item
  .diy-goods-item-box
  .goods-item-lable.lable-new
  > .goods-item-lable-box {
  padding: 0 12rpx;
  height: 40rpx;
  line-height: 40rpx;
  border-top-right-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
  color: #fff;
  background: #ff3838;
}

.diy-goods
  .diy-goods-box
  .diy-goods-item
  .diy-goods-item-box
  .goods-item-lable.lable-hot
  > .goods-item-lable-box {
  left: 30rpx;
  top: 30rpx;
  padding: 16rpx 4rpx;
  color: #fff;
  background: #ff3838;
  writing-mode: vertical-rl;
  border-radius: var(--base-radius-small-x);
}

.diy-goods
  .diy-goods-box
  .diy-goods-item
  .diy-goods-item-box
  .goods-item-lable.lable-auto
  > .goods-item-lable-box {
  height: 120rpx;
  width: 120rpx;
  left: 0;
  top: 0;
}

.diy-goods
  .diy-goods-box
  .diy-goods-item
  .diy-goods-item-box
  .goods-item-lable.lable-auto
  > .goods-item-lable-box
  image {
  height: 100rpx;
  width: 100rpx;
}
.diy-goods
  .diy-goods-box
  .diy-goods-item
  .diy-goods-item-box
  .goods-item-lable.lable-auto
  .empty-icon {
  height: 60rpx;
  width: 60rpx;
  line-height: 30rpx;
  background: #eee;
  font-size: var(--base-size-small);
  padding: 20rpx;
  text-align: center;
  color: #999;
}

.diy-goods .diy-goods-box.layout-1 .diy-goods-item {
  width: 100%;
}
.diy-goods .diy-goods-box.scroll-1.layout-1 .diy-goods-item {
  width: 70%;
}

.diy-goods .diy-goods-box.layout-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.diy-goods .diy-goods-box.layout-2 .diy-goods-item {
  width: 50%;
}
.diy-goods .diy-goods-box.scroll-1.layout-2 .diy-goods-item {
  width: 40%;
}
.diy-goods .diy-goods-box.layout-2 .diy-goods-item .diy-goods-item-box.odd {
  margin-left: 0;
}
.diy-goods .diy-goods-box.layout-2 .diy-goods-item .diy-goods-item-box.even {
  margin-right: 0;
}
.diy-goods
  .diy-goods-box.layout-2
  .diy-goods-item
  .diy-goods-item-box.diy-goods-item-box-border {
  width: calc(50% - 4rpx);
}
.diy-goods
  .diy-goods-box.layout-2
  .diy-goods-item
  .diy-goods-item-box
  .goods-item-lable.lable-new
  > div {
  left: 0;
  top: 10rpx;
}
.diy-goods
  .diy-goods-box.layout-2
  .diy-goods-item
  .diy-goods-item-box
  .goods-item-lable.lable-hot
  > .goods-item-lable-box {
  top: 10rpx;
  left: 10rpx;
}
.diy-goods
  .diy-goods-box.layout-2
  .diy-goods-item
  .diy-goods-item-box
  .goods-item-lable.lable-auto
  > .goods-item-lable-box {
  height: 100rpx;
  width: 100rpx;
}
.diy-goods .diy-goods-box .goods-selling-point {
  height: 40rpx;
  line-height: 40rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.diy-goods .diy-goods-box .goods-name {
  line-height: 40rpx;
  height: 80rpx;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.diy-goods .diy-goods-box .goods-bottom-box {
  display: flex;
  justify-content: space-between;
  line-height: 30rpx;
  align-items: center;
  margin-top: 20rpx;
}
.goods-line-price {
  font-size: var(--base-size-small-x);
  position: relative;

  text-decoration: line-through;
}

.diy-goods .diy-goods-box .goods-sales {
  white-space: nowrap;
  overflow: hidden;
  font-size: var(--base-size-small-x);
}

.diy-goods .diy-goods-box .goods-line-price {
  color: var(--base-grey);
}
.diy-goods .diy-goods-box .goods-line-price::before {
  content: "￥";
  font-size: 40%;
}
.diy-goods .diy-goods-box .goods-cart-btn {
  position: relative;
}
.diy-goods .diy-goods-box .goods-cart-btn.layout-1 {
  width: auto;
  padding: 0 15rpx;
  height: 40rpx;
  line-height: 40rpx;
  border-radius: var(--base-radius-small);
  color: #ffffff;
  border: 1rpx solid #ffffff;
}
.diy-goods .diy-goods-box .goods-cart-btn.layout-2 {
  width: auto;
  padding: 0 12rpx;
  height: 40rpx;
  line-height: 40rpx;
  border-radius: var(--base-radius-small);
  color: #ff3838;
  background: #ffffff;
  border: 1rpx solid #ff3838;
}
.diy-goods .diy-goods-box .goods-cart-btn.layout-3 {
  width: auto;
  padding: 0 12rpx;
  height: 40rpx;
  line-height: 40rpx;
  border-radius: 40rpx;
  color: #ffffff;
  border: 1px solid #ffffff;
}
.diy-goods .diy-goods-box .goods-cart-btn.layout-4 {
  width: auto;
  padding: 0 12rpx;
  height: 40rpx;
  line-height: 40rpx;
  border-radius: 40rpx;
  color: #ff3838;
  background: #ffffff;
  border: 1rpx solid #ff3838;
}

.diy-goods .diy-goods-box.layout-3 .diy-goods-item {
  width: 33.334%;
}
.diy-goods .diy-goods-box.layout-3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.diy-goods .diy-goods-box.layout-3 .diy-goods-item {
  width: 33.334%;
}
.diy-goods .diy-goods-box.layout-3 .diy-goods-item .diy-goods-item-box.odd {
  margin-left: 0;
}
.diy-goods .diy-goods-box.layout-3 .diy-goods-item .diy-goods-item-box.even {
  margin-right: 0;
}
.diy-goods
  .diy-goods-box.layout-3
  .diy-goods-item
  .diy-goods-item-box.diy-goods-item-box-border {
  width: calc(50% - 4rpx);
}
.diy-goods
  .diy-goods-box.layout-3
  .diy-goods-item
  .diy-goods-item-box
  .goods-item-lable.lable-1
  > .goods-item-lable-box {
  left: 0;
  top: 10rpx;
}
.diy-goods
  .diy-goods-box.layout-3
  .diy-goods-item
  .diy-goods-item-box
  .goods-item-lable.lable-2
  > .goods-item-lable-box {
  top: 10rpx;
  left: 10rpx;
  padding: 12rpx 4rpx;
}
.diy-goods
  .diy-goods-box.layout-3
  .diy-goods-item
  .diy-goods-item-box
  .goods-item-lable.lable-3
  > .goods-item-lable-box {
  left: 10rpx;
  top: 10rpx;
}
.diy-goods
  .diy-goods-box.layout-3
  .diy-goods-item
  .diy-goods-item-box
  .goods-item-lable.lable-auto
  > .goods-item-lable-box {
  height: 10rpx;
  width: 10rpx;
}

.diy-goods .diy-goods-box.layout-4 .diy-goods-item {
  width: 100%;
}
.diy-goods .diy-goods-box.layout-4 .diy-goods-item .diy-goods-item-box {
  display: flex;
  justify-content: flex-start;
}
.diy-goods
  .diy-goods-box.layout-4
  .diy-goods-item
  .diy-goods-item-box
  .goods-image {
  width: 280rpx;
  height: 280rpx;
  padding-bottom: 0;
}
.diy-goods
  .diy-goods-box.layout-4
  .diy-goods-item
  .diy-goods-item-box
  .diy-goods-layout-right {
  width: calc(100% - 320rpx);
  position: relative;
}
.diy-goods
  .diy-goods-box.layout-4
  .diy-goods-item
  .diy-goods-item-box
  .goods-bottom-box {
  position: absolute;
  width: calc(100% - 40rpx);
  bottom: 20rpx;
  right: 20rpx;
}
.diy-goods
  .diy-goods-box.layout-4
  .diy-goods-item
  .diy-goods-item-box
  .goods-bottom-box
  .goods-cart-btn {
  right: 0;
  bottom: 0;
}
.diy-goods
  .diy-goods-box.layout-4
  .diy-goods-item
  .diy-goods-item-box
  .goods-item-lable.lable-1
  > .goods-item-lable-box {
  left: 0;
  top: 10rpx;
}
.diy-goods
  .diy-goods-box.layout-4
  .diy-goods-item
  .diy-goods-item-box
  .goods-item-lable.lable-2
  > .goods-item-lable-box {
  top: 10rpx;
  left: 10rpx;
}
.diy-goods
  .diy-goods-box.layout-4
  .diy-goods-item
  .diy-goods-item-box
  .goods-item-lable.lable-3
  > .goods-item-lable-box {
  left: 10rpx;
  top: 10rpx;
}
.diy-goods
  .diy-goods-box.layout-4
  .diy-goods-item
  .diy-goods-item-box
  .goods-item-lable.lable-auto
  > .goods-item-lable-box {
  height: 100rpx;
  width: 100rpx;
}

.diy-goods .diy-goods-box.scroll-1 {
  display: -webkit-box;
  flex-wrap: inherit;
  overflow-x: scroll;
}
</style>